<template>
  <div style="width: 100%">
    <el-cascader
      :size="size"
      v-model="modelValues"
      :placeholder="`请选择${memo}`"
      style="width: 100%"
      clearable
      :options="dictList"
      :filterable="true"
      :collapse-tags="true"
      :collapse-tags-tooltip="true"
      @change="change"
      :props="{
        label: 'name',
        value: 'val',
        checkStrictly: true,
        multiple: multiple,
      }"
    />
  </div>
</template>

<script>
export default {
  props: {
    dictList: {
      type: Array,
      default: () => [],
    },
    modelValue: {
      type: [String, Array, Number, Boolean],
      default: "",
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    memo: {
      type: String,
      default: "",
    },
    size: {
      type: String,
      default: "default",
    },
  },
  data() {
    let obj = {
      modelValues: [this.modelValue + ""],
    };
    if (this.modelValue instanceof Array) {
      obj.modelValues = this.modelValue;
    }
    if (this.modelValue instanceof String) {
      obj.modelValues = this.modelValue.split(",");
    }
    return obj;
  },
  methods: {
    change(val) {
      if (val) {
        if (val.length > 1 && this.multiple) {
          let tempVals = [];
          val.forEach((item) => {
            tempVals = [...tempVals, ...item];
          });
          this.$emit("update:modelValue", tempVals);
        } else {
          this.$emit(
            "update:modelValue",
            val.length < 1 ? "" : val[val.length - 1]
          );
        }
      } else {
        this.$emit("update:modelValue", "");
      }
    },
  },
};
</script>

<style></style>
